<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" href="layui/css/modules/layer/default/layer.css" />
		<title>首页</title>
		<style>
		    html, body {
		      position: relative;
		      height: 100%;
		    }
		    body {
		      background: #eee;
		      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		      font-size: 14px;
		      color:#000;
		      margin: 0;
		      padding: 0;
		    }
		    .swiper-container {
		      width: 100%;
		      height: 100%;
		    }
		    .swiper-slide {
		      text-align: center;
		      font-size: 18px;
		      background: #fff;
		
		      /* Center slide text vertically */
		      display: -webkit-box;
		      display: -ms-flexbox;
		      display: -webkit-flex;
		      display: flex;
		      -webkit-box-pack: center;
		      -ms-flex-pack: center;
		      -webkit-justify-content: center;
		      justify-content: center;
		      -webkit-box-align: center;
		      -ms-flex-align: center;
		      -webkit-align-items: center;
		      align-items: center;
		    }
		</style>		
	</head>
	<body>	
		<header>
			<div class="main">
				<img src="img/logo.png" class="logo"/>
				<div class="fr fot txtFFF">欢迎来到bluPilot  请    <a class="txtFFF pl_15 pr_15" href="#" onclick="show()">登录</a><a class="txtFFF pl_15 pr_15" href="#">注册</a></div>
			</div>
		</header>		
		<div class="Tabs">
			<div class="main">
				<div class="one rel cen fl kds">
					<a href="#" class="txtFFF">首页</a>
				</div>
				<div class="one rel cen fl kds">
					<a href="#" class="txtFFF">下载</a>
					<div class="abs hidebox hide">
						<a href="#" class="txtFFF">
							<div class="cen sstab mt">
								API下载
							</div>
						</a>
						<a href="#" class="txtFFF">
							<div class="cen sstab mt">
								信标工具下载
							</div>
						</a>
						<a href="#" class="txtFFF">
							<div class="cen sstab mt">
								DEMO下载
							</div>
						</a>						
					</div>
				</div>
				<div class="one rel cen fl kds">
					<a href="#" class="txtFFF">文档</a>
					<div class="abs hidebox hide">
						<a href="#" class="txtFFF">
							<div class="cen sstab mt">
								API下载
							</div>
						</a>
						<a href="#" class="txtFFF">
							<div class="cen sstab mt">
								信标工具下载
							</div>
						</a>
						<a href="#" class="txtFFF">
							<div class="cen sstab mt">
								DEMO下载
							</div>
						</a>						
					</div>
				</div>
				<div class="one rel cen fl">
					<a href="#" class="txtFFF">商城</a>
				</div>				
			</div>
		</div>
		<div class="Carousel">
			<div class="swiper-container">
			    <div class="swiper-wrapper">
			      	<div class="swiper-slide rel">
			      		<img src="img/banner.png" />
			      		<div class="logo_infor">
			      			<div class="cen" style="height: 90px;line-height: 100px;">
			      				<span class="xbt_btn ml_10">购买信标</span> 
			      				<span class="xbt_btn active mr_10">信标推荐</span>
			      			</div>
			      		</div>
			      	</div>
			      	<div class="swiper-slide">Slide 2</div>
			      	<div class="swiper-slide">Slide 3</div>
			      	<div class="swiper-slide">Slide 4</div>
			    </div>
			</div>			
		</div>
		<div class="liucheng">
			<div class="main">
				<div class="rel fl daoxiangbox">
					<img src="img/5.png" class="daoxiang"/>
					<span class="txt#34B abs tip_text" style="top: 30px;left: 47px;color:#34B7FF;">购买信标</span>
				</div>
				<div class="fl daoxiangbox1 cen"><img src="img/4.png" /></div>
				<div class="rel fl daoxiangbox">
					<img src="img/1.png" class="daoxiang"/>
					<span class="txt#34B abs tip_text" style="top: 30px;left: 47px;color:#34B7FF;">设置信标</span>
				</div>
				<div class="fl daoxiangbox1 cen"><img src="img/4.png" /></div>
				<div class="rel fl daoxiangbox">
					<img src="img/2.png" class="daoxiang"/>
					<span class="txt#34B abs tip_text" style="top: 30px;left: 50px;color:#34B7FF;">API集成</span>
				</div>
				<div class="fl daoxiangbox1 cen"><img src="img/4.png" /></div> 
				<div class="rel fl daoxiangbox">
					<img src="img/3.png" class="daoxiang"/>
					<span class="txt#34B abs tip_text" style="top: 30px;left: 47px;color:#34B7FF;">系统开发</span>
				</div>	
				<div class="clearboth"></div>
			</div>
		</div>
		<footer>
			<p class="txt9A9">Copyright© 2018 Sogou.com. All Rights Reserved.</p>
			<p class="txt9A9">本站发布的所有内容,未经许可,不得转载,详见《知识产权声明》《用户使用协议》</p>
		</footer>	
	</body>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/swiper-3.4.2.min.js" ></script>
	<script type="text/javascript" src="layui/lay/modules/layer.js" ></script>
  	<script>
    	var swiper = new Swiper('.swiper-container');
  	</script>	
	<script>
		$(".kds").hover(function(){
			$(this).children(".hidebox").stop().slideDown();
		},function(){
			$(this).children(".hidebox").stop().slideUp();
		});			
	</script>
	<script>
		function show(){
			layer.open({
			  type: 1,
			  title: false,
			  closeBtn: 0,
			  shadeClose: true,
			  content: 		'<div style="height: 300px;background-color: #FFFFFF;width:300px;margin: 0 auto;padding: 20px;border-radius: 10px;">'+
							'<div style="height: 50px;line-height: 50px;font-size: 20px;text-align: center;">欢迎来到Blupilot</div>'+
							'<div style="height: 50px;line-height: 50px;text-align: center;">'+
								'<input type="text" placeholder="手机号或邮箱" style="padding:0px 10px;background-color:#F4F4F4;height: 40px;width:220px;border: none;"/>'+
							'</div>'+
							'<div style="height: 50px;line-height: 50px;text-align: center;width: 238px;margin: 0 auto;">'+
								'<div class="fl">'+
									'<input type="text" placeholder="手机号或邮箱" style="padding:0px 10px;background-color:#F4F4F4;height: 40px;width:100px;border: none;"/>'+
								'</div>'+
								'<div class="fr">'+
									'<button style="width: 100px;height: 40px;background-color: #00A4FF;color: #FFFFFF;border-radius:5px;border: none;">发送验证码</button>'+
								'</div>'+
								'<div class="clearboth"></div>'+
							'</div>'+
							'<div style="height: 50px;line-height: 50px;text-align: center;">'+
								'<input type="text" placeholder="密码" style="padding:0px 10px;background-color:#F4F4F4;height: 40px;width:220px;border: none;"/>'+
							'</div>'+
							'<div style="width: 240px;margin: 0 auto;margin-top: 30px;">'+
								'<button style="border-radius:5px;border:none;background-color: #35A8FE;color: #FFFFFF;height: 40px;line-height: 40px;width: 100%;">注册</button>'+
							'</div>'+
							'<div style="font-size: 10px;text-align: center;padding: 10px 0px;color: #C3C5CB;">'+
								'注册代表你同意BLuPoilt<a href="#" style="color:#36A5FD;text-decoration: inherit;">用户协议</a>'+
							'</div>'+
						 '</div>'	
			});			
		}
	</script>
</html>
